<script setup lang="ts">
import { useImageStore } from '@/stores/Image.ts';

// 使用 Pinia Store
const imageStore = useImageStore();
imageStore.getIcon();

const navLinkClass = 'text-lg p-2 hover:text-[#F9A825] font-bold';
</script>

<template>
  <div>
    <!-- Header -->
    <header class="relative flex items-center">
      <img src="/projectBg.jpg" class="header-image" alt="项目背景" />
      <div
        class="absolute left-[40%] top-[30%] w-[1200px] -translate-x-1/2 -translate-y-1/2 p-4 text-justify text-blue-950"
      >
        <h2 class="text-4xl font-semibold">UNDP - GEF</h2>
        <h1 class="mt-2 text-center text-5xl font-bold">
          减少外来入侵物种对中国具有全球重要意义的农业生物多样性和农业生态系统威胁的综合防控体系建设项目
        </h1>
      </div>
      <!-- logo -->
      <div v-if="!imageStore.iconLoading" class="logo-container">
        <img
          v-for="(img, index) in imageStore.image"
          :key="index"
          :src="img.src"
          alt="Header Image"
          class="logo-image"
        />
      </div>
      <!-- 加载状态判断 -->
      <div v-if="imageStore.iconLoading" class="loader-container">
        <div v-loading="imageStore.iconLoading"></div>
      </div>
    </header>

    <!-- Main navigation -->
    <nav class="bg-[rgb(41,156,12)] px-6 py-4 text-white">
      <ul class="mx-auto flex max-w-7xl justify-center gap-6">
        <li class="mx-4">
          <router-link to="/" exact-active-class="active" :class="navLinkClass">首页</router-link>
        </li>
        <li class="mx-4">
          <router-link
            to="/agriculture/ProjectView"
            exact-active-class="active"
            :class="navLinkClass"
          >
            项目概况
          </router-link>
        </li>
        <li class="mx-4">
          <router-link
            to="/agriculture/KnowledgeView"
            exact-active-class="active"
            :class="navLinkClass"
          >
            科普知识
          </router-link>
        </li>
        <li class="mx-4">
          <router-link
            to="/agriculture/PoliciesView"
            exact-active-class="active"
            :class="navLinkClass"
          >
            政策法规
          </router-link>
        </li>
        <li class="mx-4">
          <router-link
            to="/agriculture/DynamicView"
            exact-active-class="active"
            :class="navLinkClass"
          >
            行业动态
          </router-link>
        </li>
        <li class="mx-4">
          <router-link
            to="/agriculture/CourseView"
            exact-active-class="active"
            :class="navLinkClass"
          >
            培训课程
          </router-link>
        </li>
        <li class="mx-4">
          <router-link to="/agriculture/LinkView" exact-active-class="active" :class="navLinkClass">
            相关链接
          </router-link>
        </li>
        <li class="mx-4">
          <router-link
            to="/agriculture/AchievementView"
            exact-active-class="active"
            :class="navLinkClass"
          >
            成果展示
          </router-link>
        </li>
        <li class="mx-4">
          <router-link
            to="/agriculture/MicroFilmView"
            exact-active-class="active"
            :class="navLinkClass"
          >
            微影视图片
          </router-link>
        </li>
      </ul>
    </nav>
  </div>
</template>

<style scoped>
header {
  height: 450px; /* 可以根据实际情况调整 */
  position: relative;
}

.header-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 让图片覆盖整个容器，可能会裁剪部分图片 */
  object-position: center; /* 图片居中显示 */
}

.logo-container {
  position: absolute;
  top: 30px; /* 距离顶部的距离，可根据需要调整 */
  right: 30px; /* 距离右侧的距离，可根据需要调整 */
  display: flex; /* 让图片并排显示 */
  gap: 30px; /* 图片之间的间距 */
}

.logo-container {
  position: absolute;
  top: 30px; /* 距离顶部的距离，可根据需要调整 */
  right: 30px; /* 距离右侧的距离，可根据需要调整 */
}

.logo-image {
  max-height: 75px;
  width: auto;
}
</style>
